@import './variables.scss';
@import './base.scss';
@import './themes/default.scss';
@import './animation.scss';

// Reset styles
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: $font-family;
  font-size: $font-size-base;
  line-height: 1.5;
  color: $text-color;
  background-color: $background-base;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  height: 100%;
}

// Common utility classes
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

// Spacing utilities
.m-1 { margin: $spacing-xs; }
.m-2 { margin: $spacing-sm; }
.m-3 { margin: $spacing-md; }
.m-4 { margin: $spacing-lg; }
.m-5 { margin: $spacing-xl; }

.p-1 { padding: $spacing-xs; }
.p-2 { padding: $spacing-sm; }
.p-3 { padding: $spacing-md; }
.p-4 { padding: $spacing-lg; }
.p-5 { padding: $spacing-xl; }

// Text utilities
.text-center {
  text-align: center;
}

.text-primary {
  color: $primary-color;
}

.text-success {
  color: $success-color;
}

.text-warning {
  color: $warning-color;
}

.text-error {
  color: $error-color;
}

// Responsive utilities
@media #{$media-sm} {
  .sm\:hidden {
    display: none;
  }
}

@media #{$media-md} {
  .md\:hidden {
    display: none;
  }
}

@media #{$media-lg} {
  .lg\:hidden {
    display: none;
  }
}

// 覆盖 Element UI 的默认样式
.el-button {
  &--primary {
    background-color: $primary-color;
    border-color: $primary-color;
    
    &:hover,
    &:focus {
      background: mix(white, $primary-color, 20%);
      border-color: mix(white, $primary-color, 20%);
    }
  }
}

.el-menu {
  border: none;
  height: 100%;
  width: 100%;
}

.el-menu-item, .el-submenu__title {
  height: 50px;
  line-height: 50px;
  
  &:hover {
    background-color: mix(white, $primary-color, 90%) !important;
  }
}

.el-card {
  border: none;
  
  &.is-always-shadow {
    box-shadow: $box-shadow-light;
  }
}

// 自定义全局样式
.app-scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
    
    &:hover {
      background: #999;
    }
  }
  
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
}

// 响应式布局辅助类
.hidden {
  &-xs-only {
    @media only screen and (max-width: $screen-xs) {
      display: none !important;
    }
  }
  
  &-sm-only {
    @media only screen and (min-width: $screen-xs) and (max-width: $screen-sm) {
      display: none !important;
    }
  }
  
  &-md-only {
    @media only screen and (min-width: $screen-sm) and (max-width: $screen-md) {
      display: none !important;
    }
  }
}

// 动画类
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

// 布局辅助类
.flex {
  display: flex;
  
  &-column {
    flex-direction: column;
  }
  
  &-wrap {
    flex-wrap: wrap;
  }
  
  &-center {
    justify-content: center;
    align-items: center;
  }
  
  &-between {
    justify-content: space-between;
  }
  
  &-around {
    justify-content: space-around;
  }
}

// 间距类
.m {
  &-1 { margin: 4px; }
  &-2 { margin: 8px; }
  &-3 { margin: 12px; }
  &-4 { margin: 16px; }
  &-5 { margin: 20px; }
}

.p {
  &-1 { padding: 4px; }
  &-2 { padding: 8px; }
  &-3 { padding: 12px; }
  &-4 { padding: 16px; }
  &-5 { padding: 20px; }
} 